<template>
  <div class="app-container">
    <aside>Ansible Playbook 执行</aside>
    <el-divider></el-divider>
    <el-form>

        <el-card>
      <el-row style="">
        <el-col :span="8">
        <span style="color: gray">选择执行的主机组</span><br><br>
        <el-select v-model="group" size="medium" multiple placeholder="选择主机组"  @change="group_to_hosts" style="width:95%">
          <el-option
            v-for="item in groups"
            :key="item.id"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select><br>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light" style="min-height:72px;">
          <el-tag v-for="tag in host_select_list" :key="tag.ip" closable   :disable-transitions="false">
            {{tag.hostname}}
          </el-tag>
          </div>
        </el-col>
      </el-row>
        </el-card><br>

      <el-card>
            <el-row style="">
              <el-col :span="8">
              <span style="color: gray">选择PlayBook</span><br><br>
              <el-select v-model="playbook" size="medium" @change="change_playbook_id" placeholder="选择PlayBook" style="width:95%">
                <el-option
                  v-for="item in playbooks"
                  :key="item.id"
                  :label="item.nickName"
                  :value="item.id">
                </el-option>
              </el-select><br>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple-light" style="min-height:72px;">
                  <el-button type="text" @click="show_playbook_content(playbook_id)">查看 PlayBook 内容</el-button>
                  <pre>
                    {{ playbook_content }}
                  </pre>
                </div>
              </el-col>
            </el-row>   
      </el-card><br>
      <el-card>
            <el-row style="">
              <el-col :span="8">
              <span style="color: gray">选择执行的功能</span><br><br>
              <el-select v-model="execFunc" size="medium" placeholder="选择功能" style="width:95%">
                <el-option
                  v-for="item in functions"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>  
              </el-col>
              <el-col :span="16">
                <!-- <div class="grid-content bg-purple-light" style="height:72px;">
                </div> -->
            <span style="color: gray">输入额外参数</span><br><br>
            <el-input type="textarea" minlength="7"></el-input>
              </el-col>
            </el-row>


      </el-card>      <br>
      
      
      <el-button type="primary" icon="el-icon-thumb">提交</el-button>
           
    </el-form>

  </div>
</template>

<script>
import { fetchList } from '@/api/ansibleui'
import Sortable from 'sortablejs'
import Axios from 'axios'

export default {
  name: 'DragTable',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      playbook_id: null,
      playbook_content: '',
      host_select_list: [],
      group: '',
      groups: [],
      playbook: '',
      playbooks: [],
      execFunc: '',
      functions: [
        {'name': '检测语法'},
        {'name': '检测执行'},
        {'name': '检测执行主机列表'},
        {'name': '执行 PlayBook'},
      ],
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      sortable: null,
      oldList: [],
      newList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    change_playbook_id(items){
      console.log(items)
      this.playbook_id = items
    },
    show_playbook_content(id){
      if(id){
        console.log(this.$root.baseUrl+'/playbook/content/'+ id +'/')
        Axios.get(this.$root.baseUrl+'/playbook/content/'+ id +'/').then(resp => {
          this.playbook_content = resp.data.content
        })
      }

    },
    group_to_hosts(items){
      console.log(items, this.groups.length)

      var tmp = []
      for(var i in this.groups){
        console.log('ds',this.groups[i].id)
        if(items.indexOf(this.groups[i].id) != -1){
          console.log('check',this.groups[i].hosts)
          tmp = tmp.concat(this.groups[i].hosts)
        }
      }
      this.host_select_list = tmp
      console.log(this.host_select_list)
    },
    async getList() {
      this.listLoading = true


      var playbooks = await fetchList('playbooks', {})
      this.playbooks = playbooks.data.items

      var groups  = await fetchList('groups', {})
      console.log(groups)
      this.groups = groups.data.items
    },

  }
}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
